<template>
  <kinesis-container>
    <div class="login-wrap">
      <kinesis-element :parallaxStrength="4" :type="parallax">
        <div class="login-box">
          <img
            src="../../assets/images/login/logo-small.png"
            class="nice-logo"
          />
          <p>欢迎登陆</p>
          <!-- 表单 -->
          <div class="login-form">
            <el-form :model="loginForm" :rules="rules">
              <div class="login-input">
                <!-- 用户名 -->
                <el-form-item prop="username">
                  <el-input
                    class="login-text"
                    type="text"
                    placeholder="用户名随便输入"
                    v-model="loginForm.username"
                  />
                  <span class="login-symbol">
                    <i class="iconfont nice-icon-user"></i>
                  </span>
                </el-form-item>
              </div>
              <!-- 密码 -->
              <div class="login-input">
                <el-form-item prop="password">
                  <el-input
                    class="login-text"
                    :type="passwordType"
                    placeholder="密码也是随便输入"
                    v-model="loginForm.password"
                    @keyup.enter.native="handleLogin()"
                  />
                  <!-- 小锁 -->
                  <span class="login-symbol">
                    <i class="iconfont nice-icon-lock"></i>
                  </span>
                  <span class="show-pwd" @click="showPwd">
                    <svg-icon
                      :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
                  </span>
                </el-form-item>
              </div>

              <div class="login-footer">
                <div class="login-btn-wrap">
                  <el-button
                    class="login-btn"
                    type="primary"
                    :loading="loading"
                    @click="handleLogin()"
                  >
                    登录
                  </el-button>
                </div>
              </div>
            </el-form>
          </div>
        </div>
      </kinesis-element>
    </div>
  </kinesis-container>
</template>

<script>
import { KinesisContainer, KinesisElement } from "vue-kinesis";
import {setId } from '../../utils/auth'
export default {
  name: "login",
  data() {
    return {
      // 表单
      loginForm: {
        username: "admin",
        password: "12580"
      },
      // 表单规则
      rules: {
        username: [
          { required: true, message: "用户名都没有！", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码呢！", trigger: "blur" }]
      },
      passwordType: "password",
      parallax: "depth", // 视差类型
      loading: false, // 登录按钮是否加载
      redirect: undefined // 重定向的路由
    };
  },
  components: {
    KinesisContainer,
    KinesisElement
  },
  watch: {
    $route: {
      handler: function(route) {
        // 记录当前路由
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      // this.$nextTick(() => {
      //   this.$refs.password.focus();
      // });
    },
    async handleLogin() {
      this.loading = true;
      // 分发到store 处理登录 
      const res = await this.$store.dispatch('admin/login', this.loginForm)
      if(res.data) {
        // 解构 要保存的信息
        const {id,avatar,username,role} = res.data
        // 设置信息
        await this.$store.dispatch('admin/setInfo', {id,avatar,username})
        // 保存 id 到 cookies
        setId(id)
        // 保存 token 到 cookies
        await this.$store.dispatch('admin/setToken', role.name)  
        // 跳转路由 
        this.$router.push({ path: this.redirect || '/' })
        // 取消按钮加载
        this.loading = false
        this.$message({
          showClose: true,
          message: '欢迎您 ！亲爱的 '+username,
          type: 'success'
        })
      }
      else {
          this.$message({
          showClose: true,
          message: '出错了 '+res.msg,
          type: 'error'
        })
          this.loading = false
      }
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/styles/login.scss";
</style>
